<script lang="ts" setup name="projectWeldList">
import { getListByConditionsWithPage, urls } from '@/index';
import type { DialogModel, ProjectWeldList, ProjectWeldListQueryCondition } from '@/index.d';
import { useRequest } from 'vue-request';
import DetailDialog from './DetailDialog.vue';
const title = '焊缝';
const queryCondition = reactive<ProjectWeldListQueryCondition>({
  deleted: false,
  change: false,
  currentPage: 1,
  pageSize: 20
});

const resetQueryCondition = () => {
  queryCondition.currentPage = 1;
  queryCondition.pageSize = 20;
  queryCondition.deleted = false;
  delete queryCondition.projectId;
  delete queryCondition.componentName;
  delete queryCondition.partName;
  delete queryCondition.partReference;
  delete queryCondition.partType;
  delete queryCondition.weldMethod;
  delete queryCondition.wps;
};

const {
  data: getMainTableListData,
  run: getMainTableListRun,
  loading: getMainTableListLoading
} = useRequest(() => getListByConditionsWithPage(urls.projectWeldList, queryCondition));

const handleResetQuery = () => {
  resetQueryCondition();
  getMainTableListRun();
};

const detailDialogModel = reactive<DialogModel<ProjectWeldList>>({
  visible: false,
  title,
  type: 'view',
  id: 0,
  change: false
});

watch(
  () => detailDialogModel.visible,
  (value: boolean) => {
    if (!value && detailDialogModel.change) {
      getMainTableListRun();
      detailDialogModel.change = false;
    }
  }
);
</script>
<template>
  <HqContainerTable
    :base-url="urls.projectWeldList"
    :title="title"
    :loading="getMainTableListLoading"
    :total="getMainTableListData?.total"
    :table-data="getMainTableListData?.records"
    v-model:pageSize="queryCondition.pageSize"
    v-model:current-page="queryCondition.currentPage"
    @handle-query="getMainTableListRun"
    @handle-reset-query="handleResetQuery"
    @handle-reload="getMainTableListRun"
    v-model:detail-dialog-model="detailDialogModel"
    :operate-column="true"
  >
    <template #search>
      <hq-col kind="search">
        <el-select
          v-model="queryCondition.projectId"
          placeholder="请选择项目名称"
          clearable
          filterable
          @change="getMainTableListRun"
        >
          <HqProjectNameOptions />
        </el-select>
      </hq-col>
      <hq-col kind="search">
        <el-input v-model="queryCondition.componentName" placeholder="请输入组件名称" />
      </hq-col>
      <hq-col kind="search">
        <el-select
          v-model="queryCondition.partType"
          placeholder="请选择焊缝类型"
          clearable
          @change="getMainTableListRun"
        >
          <HqDictionary type-text="焊缝类型" />
        </el-select>
      </hq-col>
      <hq-col kind="search">
        <el-select
          v-model="queryCondition.weldMethod"
          placeholder="请选择焊接方法"
          clearable
          @change="getMainTableListRun"
        >
          <HqDictionary type-text="焊接方法" />
        </el-select>
      </hq-col>
    </template>
    <template #button> </template>

    <template #tableColumns>
      <HqTableColumn label="焊缝名称" :min-width="40">
        <template #default="{ row }">
          <el-link
            type="success"
            v-if="row.attachmentUrl"
            :href="row.attachmentUrl"
            target="_blank"
          >
            图纸
          </el-link>
          <el-text v-else> 无图纸</el-text>
        </template>
      </HqTableColumn>
      <HqTableColumn label="项目名称" prop="projectName" :min-width="150" />
      <HqTableColumn label="组件名称" prop="componentName" :min-width="50" />
      <HqTableColumn label="工件名称" prop="partName" :min-width="100" />
      <HqTableColumn label="工件编号" prop="partReference" :min-width="50" />
      <HqTableColumn label="工件厚度" prop="partThickness" :min-width="50" />
      <HqTableColumn label="数量" prop="partQuantity" :min-width="50" />
      <HqTableColumn label="工件类型" prop="partType" :min-width="50" />
      <HqTableColumn label="焊接方法" prop="weldMethodStr" :min-width="50" />
      <HqTableColumn label="合格率统计" prop="isStatistics" :min-width="50" />
    </template>
  </HqContainerTable>
  <DetailDialog v-model:dialog-model="detailDialogModel" v-if="detailDialogModel.visible" />
</template>
<style lang="scss" scoped></style>
